import React, { Component } from 'react'

class Child extends Component {
  render() {
    // 模拟具名插槽
    let { children } = this.props
    // 判断它是否数组
    // if (!Array.isArray(children)) {
    //   children = [children]
    // }
    if(!('push' in children)){
      children = [children]
    }
    return (
      <div>
        {children.find((item) => item.props.name == 'header') || (
          <div>默认导航</div>
        )}
        <h3>我是Child组件</h3>
        {children.find((item) => item.props.name == 'footer') || (
          <div>默认声明</div>
        )}
      </div>
    )
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <h2>App组件</h2>
        <hr />
        <Child>
          <div name="header">导航</div>
          <div name="footer">声明</div>
        </Child>
      </div>
    )
  }
}

export default App
